<template>
  <v-app>
    <v-main>
      <v-snackbar
        v-model="snackbar"
        multi-line
        :style="{ bottom: `90%` }"
        timeout="1000"
        @click="snackbar = false"
        :color="color"
      >
        <v-icon left>{{ text_ico }}</v-icon> {{ text }}
      </v-snackbar>
      <v-container fluid>
        <v-row justify="center" align="center" class="login-row">
          <v-col cols="12" sm="8" md="4">
            <v-card class="login-card">
              <v-card-title class="text-center">
                <h2>登录</h2>
              </v-card-title>
              <v-card-text>
                <v-form @submit.prevent="login">
                  <v-text-field
                    v-model="username"
                    label="用户名"
                    outlined
                    required
                  ></v-text-field>

                  <v-text-field
                    v-model="password"
                    label="密码"
                    type="password"
                    outlined
                    required
                  ></v-text-field>

                  <v-btn type="submit" block color="primary">登录</v-btn>
                </v-form>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      snackbar: false,
      text: ``,
      color: "success",
      text_ico: "mdi-check-circle",
    };
  },
  methods: {
    alertmsg(text, ico, color) {
      console.log(text, ico, color);
      if (ico === undefined) {
        ico = "mdi-check-circle";
      }
      if (color === undefined) {
        color = "success";
      }

      this.color = color;
      this.text = text;
      this.text_ico = ico;
      this.snackbar = true;
      console.log(text, ico, color);
    },

    login() {
      axios
        .post("api/login", { username: this.username, password: this.password })
        .then((response) => {
          this.alertmsg(response.data.msg);
          setTimeout(() => {
            this.snackbar = false;
            window.location.replace("/md");
          }, 1000);
        })
        .catch((error) => {
          // 处理请求错误
          this.alertmsg(error.response.data.msg, "mdi-cancel", "error");
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.login-row {
  height: 100vh;
}

.login-card {
  padding: 20px;
}
</style>
